<template>
	<div class="head">
		<div class="head-time">{{ now }}</div>
		<div class="head-title">XXXXXX集团智慧集控中心</div>
		<div class="tools">
			<span class="text">安全运行1100天</span>
			<svgicon iconClass="app" className="app-icon ml20" />
		</div>
	</div>
</template>

<script setup>
import svgicon from "@/components/SvgIcon";
import { parseTime } from "@/utils/utils";
const now = parseTime(new Date(), "{y}年{m}月{d}日 {h}:{i}:{s}");
</script>

<style lang="scss" scoped>
.head {
	width: 100%;
	height: 100%;
	background: url("@/assets/images/head-bg.png") no-repeat 0 0;
	background-size: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	&-title {
		font-family: YouShe;
		color: #fff;
		font-size: 40px;
		font-weight: 400;
		text-align: center;
	}
	&-time {
		position: absolute;
		left: 61px;
		top: 16px;
		color: #8da3c1;
		font-size: 16px;
		font-weight: bold;
	}
	.tools {
		position: absolute;
		right: 48px;
		top: 10px;
		display: flex;
		align-items: center;
		.text {
			font-weight: bold;
			font-size: 16px;
			color: #8da3c1;
		}
		.app-icon {
			width: 32px;
			height: 32px;
			cursor: pointer;
		}
	}
}
</style>
